<template>
  <div class="home">
    <!-- 背景阴影 -->
    <div class="bg-mask" :style="getBackgroundImage" />

    <!-- 导航和轮播 -->
    <div class="home-container m-center">
      <home-nav />
      <mooc-carousel :height="316" trigger="click" @change="handelCarouselChange">
        <mooc-carousel-item v-for="(item,index) in swiperList" :key="index">
          <img :src="item.pic" class="swiper-img" @click="toCourseDetail(item.courseId)">
<!--          <router-link :to="'/course/'+item.courseId">-->
<!--          </router-link>-->
        </mooc-carousel-item>
      </mooc-carousel>
      <home-banner />
    </div>

    <!--  实战导航 -->
    <course-list :course="recommendList"
                 title="畅／销／好／课"
                 left-icon="center -72px"
                 right-icon="center -108px"
                 style="margin-top: 40px"
    />

    <!-- 新上好课 -->
    <course-list :course="newList"
                 title="新／上／好／课"
                 left-icon="center -144px"
                 right-icon="center -180px"
    />

    <!-- 新手入门 -->
    <course-list :course="guideList"
                 title="新／手／入／门"
                 left-icon="center 0px"
                 right-icon="center -36px"
    />

    <!-- 技能提升 -->
    <course-list :course="improveList"
                 title="技／能／提／升"
                 left-icon="center -216px"
                 right-icon="center -252px"
    />

    <!-- 前沿技术 -->
    <course-list :course="technologyList"
                 title="前／沿／技／术"
                 left-icon="center -288px"
                 right-icon="center -324px"
    />


    <!-- 精英讲师 -->
    <home-teacher :teacher-list="teacherList" />

  </div>
</template>
<script>
import HomeNav from './home-nav.vue'
import HomeBanner from './home-banner.vue'
import CourseList from './home-course-list.vue'
import HomeTeacher from './home-teacher.vue'
import { getAdList, getRecommendCourse, getNewCourse, getGuideCourse, getImproveCourse, getTechnologyCourse, getTeacherList } from '@/api/home'

export default {
  name: 'Home',
  data () {
    return {
      swiperList: [], //首页轮播信息
      teacherList: [], // 精英讲师
      technologyList: {}, // 前言技术
      improveList: {}, // 技能提升
      guideList: {}, // 新手入门
      newList: {}, // 新上好课
      recommendList: {}, // 实战课程
      currentSwiper: '' // 当前的轮播图片
    }
  },
  created () {
    this.getBanner()
    this.getTeacherList()
    this.getRecommend()
    this.getNew()
    this.getGuide()
    this.getImprove()
    this.getTechnology()
  },
  methods: {
    // 滚动轮播滚动完毕事件
    handelCarouselChange (index) {
      this.currentSwiper = this.swiperList[index].pic
    },

    //新建页面到轮播图指定课程
    toCourseDetail(courseId){
      let url = this.$router.resolve({
        path: '/course/'+courseId,
      });
      window.open(url.href, '_blank')
    },

    // 首页轮播信息
    getBanner () {
      getAdList().then((result) => {
        let { code, data } = result
        if (code === 20000) {
          this.swiperList = data.items
          if (this.swiperList.length > 0) {
            this.currentSwiper = this.swiperList[0].pic
          }
        }
      })
    },

    // 获取实战推荐课程信息
    getRecommend(){
      getRecommendCourse().then(result => {
        let { code, data } = result
        if (code === 20000){
          this.recommendList = data
        }
      })
    },

    // 获取新上好课课程信息
    getNew(){
      getNewCourse().then(result => {
        let { code, data } = result
        if (code === 20000){
          this.newList = data
        }
      })
    },

    //获取新手入门课程信息
    getGuide(){
      getGuideCourse().then(result => {
        let { code, data } = result
        if (code === 20000){
          this.guideList = data
        }
      })
    },

    //获取技能提升课程信息
    getImprove(){
      getImproveCourse().then(result => {
        let { code, data } = result
        if (code === 20000){
          this.improveList = data
        }
      })
    },

    //获取前沿技术课程信息
    getTechnology(){
      getTechnologyCourse().then(result => {
        let { code, data } = result
        if (code === 20000){
          this.technologyList = data
        }
      })
    },

    // 获取精英讲师信息
    getTeacherList () {
      getTeacherList().then(res => {
        let { code, data } = res
        if (code === 20000) {
          this.teacherList = data.items
        }
      })
    },
  },
  computed: {
    getBackgroundImage () {
      return {
        'background-image': `url(${this.currentSwiper})`
      }
    }
  },
  components: {
    HomeNav,
    HomeBanner,
    CourseList,
    HomeTeacher,
  }
}
</script>
<style lang="stylus" scoped>
  @import '~assets/stylus/variables.styl';
  .home
    margin-top: 32px;
    min-height: 750px;
    .bg-mask
      position: absolute;
      top: 0;
      background-size: cover;
      transition: all 0.3s;
      width: 100%;
      height: 180px;
      opacity: 0.3;
      filter: blur(100px);
    .home-container
      position: relative;
      box-shadow: 0 12px 24px 0 $shadow;
      border-radius: 8px;
      .mooc-carousel
        position: absolute;
        left: 216px;
        top: 0;
        right: 0;
        >>> .mooc-carousel-indicators
          left: initial;
          right: 20px;
          transform: none;
        .swiper-img
          cursor pointer;
          display: block;
          width: 100%;
          height: 316px;
          border-top-right-radius: 8px;
</style>
